<template>
  <div class="file-show">
    <div v-if="mediaType === 'v'">
      <VideoPlay
        v-if="playPath"
        ref="videoPlay"
        :videoUrl="filePath + playPath"
        :autoplay="true"
        :controls="true"
        :loop="false"
        :muted="false"
        preload="auto"
        :showPlay="true"
        :style="`width: 100%; height: 100%;`"
        @videoCanPlay="videoCanPlay"
        @videoCurrent="videoCurrent"
        @playing="$emit('playing')"
      />
    </div>
    <div v-else-if="mediaType === 'a'">
      <el-image
        v-if="posterPath"
        style="width: 100%; height: calc(100% - 60px)"
        :src="filePath + posterPath"
        fit="scale-down"
      ></el-image>
      <audio
        ref="audioRef"
        v-if="playPath"
        :src="filePath + playPath"
        autoplay
        controls
        class="define-audio"
      ></audio>
    </div>
    <div v-else-if="mediaType === 'd'" class="pdf">
      <pdf ref="PDF" v-if="playPath" :src="filePath + playPath"></pdf>
    </div>
    <div v-else-if="mediaType === 'p'" class="jpg">
      <el-image
        style="width: 100%; height: 100%"
        v-if="playPath"
        :src="filePath + playPath"
        fit="scale-down"
        :preview-src-list="[filePath + playPath]"
      ></el-image>
    </div>
  </div>
</template>
<script>
import sheet from './sheet';
import pdf from './pdf';
import aplayer from 'vue-aplayer';
import VideoPlay from '@/components/VideoPlay';

export default {
  name: 'fileShow',
  components: {
    sheet,
    aplayer,
    pdf,
    VideoPlay,
  },
  props: {
    mediaType: {
      type: String,
      required: true,
    },
    playPath: {
      type: String,
      required: true,
    },
    posterPath: {
      type: String,
      required: false,
    },
  },
  data() {
    return {
      filePath: filePath,
      isCsv: true,
      sheetData: [], // sheet
      musics: [],
    };
  },
  watch: {},
  methods: {
    initField() {
      this.musics = [];
    },
    handlerMusic() {
      this.musics.push({
        title: '歌曲名称',
        artist: '演唱者',
        url: filePath + this.playPath,
        lrc: '歌词或歌词文件的URL',
      });
    },
    videoCanPlay(duration, size) {
      this.$emit('videoCanPlay', duration, size);
    },
    videoCurrent(current) {
      this.$emit('videoCurrent', current);
    }
  },
};
</script>
<style lang="scss" scoped>
.file-show {
  width: 100%;
  height: 100%;
  > div {
    width: 100%;
    height: 100%;
  }
  .pdf {
    width: 100%;
    height: 100%;
  }
  // .jpg {
  //   width: 100%;
  //   height: 100%;
  //   display: flex;
  //   justify-content: center;
  //   align-items: flex-end;
  // }
  .define-audio {
    display: block !important;
    width: 100%;
  }
}
</style>
